<template>
    <div class="ac-all">
        <div class="filter">
            <JButtons :list="buttons" v-model="curBtn" @change="onTypeChange"></JButtons>
            <v-menu class="header" transition="slide-y-reverse-transition" origin="end">
                <template v-slot:activator="{ props }">
                    <div class="j-search c-title-5" v-bind="props">
                        <span class="j-ctx">
                            <template v-if="curRange == searchRanges[0]">{{$t("message.Global.all")}}</template>
                            <template v-else> > {{ formatBigNumber(curRange.from, 0) }} </template>
                        </span>
                        <div class="ss-btn">
                            <!-- 全部 -->
                            <span class="iconfont icon-sanjiaoxing"></span>
                        </div>
                    </div>
                </template>
                <v-list style="transform: translateX(100%)">
                    <!-- <div class="inp-box">
                        <input type="text" class="coin-inp" v-model="search" @click.stop placeholder="search" />
                    </div> -->
                    <v-list-item v-for="(item, i) in searchRanges" @click="onRange(item, i)">
                        <v-list-item-title class="d-flex align-center fline">
                            <div class="i-txt c-title-5">
                                <template v-if="i == 0">{{$t("message.Global.all")}}</template>
                                <template v-else> > {{ formatBigNumber(item.from, 0) }} </template>
                            </div>
                            <div v-if="item == curRange" class="cir"></div>
                        </v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </div>

        <div class="tb c-title-5">
            <div class="th-r" @click="onStop">
                <div class="th-item f-item1">行为</div>
                <div class="th-item f-item2">地址</div>
                <div class="th-item f-item3"></div>
                <div class="th-item f-item4">互动</div>
                <div class="th-item f-item5 d-flex justify-center">数量</div>
                <div class="th-item f-item6">价值</div>
                <div class="th-item f-item7">時間</div>
                <div class="th-item f-item8">操作</div>
            </div>

            <!-- <div class="th-list"> -->
            <!-- <transition-group name="slide"> -->
            <AnimTable ref="anim" :list="desserts" :max="20" class="mv-tb" :interval="600000">
                <template v-slot:row="{ row: item, rowIndex, ago }">
                    <!-- <tr class="th-t" v-for="item in desserts" :key="item.key" @click="onShow(item)"></tr> -->
                    <div class="th-body">
                        <div class="th-item f-item1" :title="formatTimestamp(item.timestamp)">{{ item.type }}</div>

                        <!-- 转账 -->
                        <template v-if="item.type == 'transfer'">
                            <div class="th-item f-item2 d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-1">
                                    <span class="iconfont" :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address" @click="onPerson(item.fromTag || item.address, item.fromAddressType == 'eoa', item)"></Copy>
                            </div>

                            <div class="th-item f-item3">
                                <img src="@/assets/one.png" class="ic-img" />
                            </div>
                            <div class="th-item f-item4">
                                <div class="d-flex align-center">
                                    <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                    <div class="icon-box ico-2">
                                        <span class="iconfont" :class="item.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                    </div>
                                    <Copy :text="item.toTag || item.toAddress" @click="onPerson(item.toTag || item.toAddress, item.toAddressType == 'eoa', item)"></Copy>
                                </div>
                            </div>

                            <div class="th-item f-item5 d-flex align-center">
                                <!-- <img :src="getImg(item)" class="ic-img" /> -->
                                <div class="flex-txt text-truncate wgt" :class="item.outAmount > 0 ? 'win-color' : 'lose-color'" :title="item.outAmount">
                                    {{ formatBigNumber(item.outAmount) }}

                                    <span class="syb coin-link" @click="onDetail(item, 'out')">{{ item.outSymbol }}</span>
                                </div>
                                <!-- <span class="flex-txt text-truncate" :title="getCoin(item)">{{ getCoin(item) }}</span> -->
                            </div>

                            <div class="th-item f-item6">
                                <!-- <Copy :text="item.transactionHash"></Copy> -->
                                <span :title="item.outusdt">${{ formatBigNumber(item.outusdt) }}</span>
                            </div>
                        </template>

                        <!-- 成交 -->
                        <template v-else>
                            <div class="th-item f-item2 d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-1">
                                    <span class="iconfont" :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address" @click="onPerson(item.fromTag || item.address, item.fromAddressType == 'eoa', item)"></Copy>
                            </div>

                            <div class="th-item f-item3">
                                <img src="@/assets/two.png" class="ic-img" />
                            </div>

                            <div class="th-item f-item4 d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-2">
                                    <span class="iconfont" :class="item.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.toTag || item.toAddress" @click="onPerson(item.toTag || item.toAddress, item.toAddressType == 'eoa', item)"></Copy>
                            </div>

                            <div class="th-item f-item5 d-flex more-line">
                                <!-- <img :src="getImg(item)" class="ic-img" /> -->
                                <div class="flex-txt text-truncate lose-color wgt" :title="item.outAmount">
                                    {{ formatBigNumber(item.outAmount) }} <span class="syb coin-link" @click="onDetail(item, 'out')">{{ item.outSymbol }}</span>
                                </div>
                                <div class="flex-txt text-truncate win-color wgt" :title="item.inAmount">
                                    {{ formatBigNumber(item.inAmount) }} <span class="syb coin-link" @click="onDetail(item, 'in')">{{ item.inSymbol }}</span>
                                </div>
                                <!-- <span class="flex-txt text-truncate" :title="getCoin(item)">{{ getCoin(item) }}</span> -->
                            </div>

                            <div class="th-item f-item6">
                                <span :title="item.outusdt">${{ formatBigNumber(item.outusdt) }}</span>
                            </div>
                        </template>
                        <div class="th-item f-item7" :title="formatTimestamp(item.timestamp)">{{ ago }}</div>
                        <div class="th-item f-item8">
                            <span class="c-title-5 look" @click="onJump(item)">
                                <VIcon>mdi mdi-open-in-new</VIcon>
                            </span>
                            <span class="c-title-5 look ml-3" @click="onJump(item)">
                                <VIcon>mdi mdi-share-variant</VIcon>
                            </span>
                        </div>
                    </div>
                </template>
            </AnimTable>

            <!-- </div> -->

            <!-- <div class="nones" v-show="isEmpty">
                <JEmpty></JEmpty>
            </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from "vue";
import Copy from "@/components/copy/index.vue";
import { useActivity } from "@/stores/activity";
import { formatNumber, formatBigNumber, formatTimestamp, formatTimeAgo } from "@/comm/format";
import img1 from "@/assets/trans.png";
import img2 from "@/assets/dine.png";
import JButtons from "@/components/j-buttons/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import AnimTable from "@/components/anim-table-no/index.vue";
import { Bus, CONN_ACTIVITY } from "@/connetion/Bus";
import { difference } from "@/comm/arrayTooler";
import { useRouter } from "vue-router";
import { resourceUsage } from "process";
const activity = useActivity();
const router = useRouter();
const desserts = ref<any[]>([]);
// const buttons = ref(["所有", "交易", "转账"]);
const buttons = ref([
    {
        label: "所有",
        value: null
    },
    {
        label: "交易",
        value: "swap"
    },
    {
        label: "转账",
        value: "transfer"
    }
]);
const curBtn = ref<any>(null);

const anim = ref();
const onStop = () => {
    anim.value.stop();
};

const isEmpty = ref(true);

const updateEmpty = () => {
    // console.log("anim.value.getList()", anim.value?.getList());
    if (anim.value) {
        let list = anim.value.getList();
        if (list && list.length > 0) {
            return false;
        }
    }
    return true;
};

const onDetail = (coin: any, type: string) => {
    let ct = type == "in" ? coin.inTokenAddress : coin.outTokenAddress;
    // router.push({name: 'token', params: {id: ct}});
    window.open("/token/" + ct);
};

const searchRanges = ref([createRange(null as any, true), createRange([10, 1000]), createRange([1000, 100000]), createRange([100000, 100000000]), createRange([100000000, 1000000000000])]);

const curRange = ref(searchRanges.value[0]);

function createRange(ary: any[], choose = false) {
    if (!ary) {
        return { choose };
    }
    return {
        from: ary[0],
        to: ary[1],
        choose
    };
}

onMounted(async () => {
    curBtn.value = buttons.value[0];
    // await activity.loadHistory();
    // updateRange();
    resetTable();

    // Bus.on(CONN_ACTIVITY, (val: any) => {
    //     activity.pushActivitys(val);
    // });
});

watch(
    () => [...activity.visibleRange],
    (newVal, oldVal) => {
        const diff = difference(newVal, oldVal);
        if (anim.value) {
            anim.value.addList(diff);
        }
    }
);

const onRange = (item: any, i: number) => {
    curRange.value = item;
    if (i == 0) {
        activity.changeRange(null);
    } else {
        activity.changeRange([item.from, item.to]);
    }
    // updateRange();
    resetTable();
};

const onTypeChange = (t: any) => {
    activity.changeFilterType(t.value);
    resetTable();
};

const resetTable = () => {
    anim.value.resetTable(activity.visibleRange);
    setTimeout(() => {
        isEmpty.value = updateEmpty();
    }, 120);
};

const updateRange = () => {
    let ary = [...activity.visibleRange];
    ary.forEach(i => {
        i.ago = formatTimeAgo(i.timestamp);
    });
    desserts.value = ary;
    // setTimeout(updateRange, 300);
};

const getImg = (item: any) => {
    if (item.type == "transfer") {
        return img1;
    }
    return img2;
};

const onJump = (item: any) => {
    window.open("https://etherscan.io/tx/" + item.transactionHash);
};

const getNum = (item: any) => {
    const t = formatBigNumber(item.inAmount || item.outAmount);
    if (t == 0) {
        if (item.type != "transfer") {
            console.log("null---", item);
        }
    }
    return t;
};
const getCoin = (item: any) => {
    return item.inAmount ? item.inSymbol : item.outSymbol;
};

const onShow = (item: any) => {
    console.log(item);
    onPerson(item.fromTag || item.address, false, null);
};

const onPerson = (str: string, val: boolean, item: any) => {
    console.error(item);
    if (!val) return;
    console.log(str);
    window.open("/address/" + str);
};

// // 创建一个 Date 对象并设置时间戳（以毫秒为单位）
// const timestamp = 1632825600000; // 例如，这是一个时间戳

// // 选择目标时区
// const targetTimeZone = 'America/New_York'; // 例如，将时区设置为纽约

// // 创建一个日期对象，同时指定时区
// const dateInTargetTimeZone = new Date(timestamp);
// const options = { timeZone: targetTimeZone };

// // 使用 Intl.DateTimeFormat 格式化日期对象
// const formattedDate = new Intl.DateTimeFormat('en-US', options).format(dateInTargetTimeZone);

// console.log(formattedDate); // 输出格式化后的日期字符串

// const desserts = ref([
//     {
//         address: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         children: {
//             inAmount: 251812040178,
//             inSymbol: "PEPEMAN",
//             outAmount: 0,
//             outSymbol: "WETH",
//         },
//         fromContract: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         timestamp: 1690935467000,
//         toAddress: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         toContract: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         transactionHash: "0x16eda129209b7fa1fe580ab11b0495ef3ca3"
//     }
// ])
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
